
<script>
import ExtForm from '@/components/lt/codeGenerator/components/ExtForm'
import request from '@/utils/request'
import ExtTable from '@/components/lt/codeGenerator/components/ExtTable'
import moment from 'moment'
import {SysMixin} from '@/mixins/SysMixin'
import defaultSettings from '@/config/defaultSettings'
import pick from 'lodash.pick'
import ExtRow from '@/components/lt/codeGenerator/components/ExtRow'
import ExtDrawer from './ExtDrawer'
import ExtModal from './ExtModal'
import ExtButtonItem from '@/components/lt/codeGenerator/components/ExtButtonItem'
import ExtButton from '@/components/lt/codeGenerator/components/ExtButton'
import { Modal } from 'ant-design-vue'
import ExtDropDownButton from '@/components/lt/codeGenerator/components/ExtDropDownButton'
import {getLodop} from '/public/static/clodop/LodopFuncs'
import ExtTree from '@/components/lt/codeGenerator/components/ExtTree'
import ExtTag from '@/components/lt/codeGenerator/components/ExtTag'
import ExtGridForm from '@/components/lt/codeGenerator/components/ExtGridForm'
import ExtFormCol from '@/components/lt/codeGenerator/components/ExtFormCol'
import Big from 'big.js'
import LExcelUpload from '@/components/lt/LExcelUpload'
import LExcelDownload from '@/components/lt/LExcelDownload'
import onlyoffice from '@/utils/onlyoffice/index'
import LEditTableColumn from '@/components/lt/editTable/LEditTableColumn'
import * as echarts from 'echarts'
import ExtMap from '@/components/lt/codeGenerator/components/ExtMap'
import ExtLineChar from '@/components/lt/codeGenerator/components/ExtLineChar'
import ExtBarChar from '@/components/lt/codeGenerator/components/ExtBarChar'
import ExtPieChar from '@/components/lt/codeGenerator/components/ExtPieChar'
import ExtQueryForm from '@/components/lt/codeGenerator/components/ExtQueryForm'
import { v4 as uuidv4 } from 'uuid'
import {bus} from '@/utils/util'
export default {
    
    components:{ExtForm,ExtTable,ExtRow,ExtDrawer,ExtButtonItem,ExtButton,ExtDropDownButton,ExtTree,ExtTag,ExtGridForm,ExtFormCol,LExcelUpload,LExcelDownload,onlyoffice,LEditTableColumn,ExtLineChar,ExtBarChar,ExtPieChar,ExtMap,ExtQueryForm},
    mixins:[SysMixin],
   
    data(){
        return{
            bus,
            width:800,
            defaultSettings,
            moment,
            visible:false,
            model:{},
            confirmLoading:false,
            title:'标题',
            pageMethods:null,//页面方法
            pageData:null,//页面数据
            timer:null,
            pick,
            request,
            isShowBootomButton:true,
            isShowOnlyoffice:false,
            Modal,
            LODOP:null,
            getLodop,
            Big,
            excelUploadTemplateId:'',
            excelDownloadTemplateId:'',
            excelUploadTemplateName:'',
            excelDownloadTemplateName:'',
            excelDownTable:null,
            excelDownShowColumn:true,
            excelUploadShowTemplate:true,
            excelUploadImoprtParameter:{},
            wrapStyle:{position:'absolute'},
            maskStyle:{backgroundColor:'rgba(0,0,0,0.3)'},
            onlyofficeDocumentServerUrl:'',
            onlyofficeConfig: {
                document: {
                   fileType: "docx",
                   key: "",
                   title: "",
                   url: "",
                   permissions:{
                        download:false,//是否能下载
                        edit:true,//是否可编辑
                        chat:false,//是否启用聊天功能
                        comment:false,//是否可以批注
                        copy:true,//是否可以复制
                        protect:false,//保护按钮是否显示
                   },
                   info:{
                        owner:'zsp'
                   }
               },
               documentType: "word",
               editorConfig: {
                    callbackUrl: "", 
                    lang: "zh-CN", // 中文
                    // "mode": "view",//查看模式
                    mode: "edit",//编辑模式
                    customization:{
                        forcesave:true,
                        autosave:false,
                        help:false,
                        plugins:false,//是否启用插件
                        hideNotes:true,
                        review:{
                            hideReviewDisplay:true
                        }
                    }
               },
           }
  
        }
    },
    
    computed:{},
    watch:{},
    methods:{
        //动态添加监听
            // this.$watch('pageData',()=>{
            //     console.log(1111)
            // },{deep: true})
        pageEdit(){},
        edit (pageId,record) {
            // console.log(record)
            if(!pageId){
                return false
            }
            
            this.model = Object.assign({}, record)
            this.querySysPage(pageId)

        },
       
        querySysPage(pageId){
            this.confirmLoading=true
            request.get('/SysPageController/querySysPageById',{params:{pageId:pageId}}).then(async (res)=>{
                if (res.success) {
                    res.result.pageData = JSON.parse(require('js-base64').Base64.decode(res.result.pageData))
                    this.pageData = res.result.pageData
                    this.initDictCodes = res.result.pageDict
                    this.initSysPageMethods(this.pageData.code.methods)
                    this.initSysPageData(this.pageData.code.data)
                    this.$nextTick(() => {
                        this.visible = true
                        this.timer = setTimeout(() => {this.pageEdit()}, 100)
                    })

                } else {
                    this.$message.warning(res.message)
                }
            }).finally(()=>{
                this.confirmLoading=false
            })
        },
        
        
        ok(){
            this.close()
        },
        cancel(){
            this.bus.$off()
            this.visible=false
        },
        close (refreshRef) {
            this.bus.$off()
            if(this.timer){
                clearTimeout(this.timer)
            }
            this.$emit('close',refreshRef)
            this.visible = false
        }
        
    },
    render: function(h) {
        if(this.pageData){
            const bottomButton = (
                <div class="drawer-bootom-button">
                    <a-button shape="round" onClick={this.cancel} style="margin-right: .8rem">取消</a-button>
                    <a-button  shape="round" onClick={this.ok} type="primary" >确定</a-button>
                </div>
            )
            const onlyoffice = (
                <div class='qualityManual-container'>
                    <div class='qualityManual-container-office'>
                        <onlyoffice id="extOfficeEdit" documentServerUrl={this.onlyofficeDocumentServerUrl} config={this.onlyofficeConfig}></onlyoffice>
                    </div>
                </div>
            )
            return(
                <a-drawer destroyOnClose={true} placement="right" closable={true} visible={this.visible} maskClosable={true} width={this.width} title={this.title} onClose={this.cancel}
                    getContainer="body" wrap-style={this.wrapStyle} maskStyle={this.maskStyle}>
                    <a-spin spinning={this.confirmLoading}>
                        {this.initSysPageComponents(h,this.pageData.components,this.initDictCodes)}
                    </a-spin>
                    <div style="height:30px;"></div>
                    {this.isShowBootomButton?bottomButton:null}
                    {this.isShowOnlyoffice?onlyoffice:null}
                    <ExtDrawer ref="ExtDrawer" onClose={this.closeCallback}></ExtDrawer>
                    <ExtModal ref="ExtModal" onClose={this.closeCallback}></ExtModal>
                    <LExcelUpload ref="LExcelUpload" onHandleOk={this.excelUploadCallBack} imoprtParameter={this.excelUploadImoprtParameter} isShowTemplate={this.excelUploadShowTemplate} templateId={this.excelUploadTemplateId} templateName={this.excelUploadTemplateName}></LExcelUpload>
                    <LExcelDownload ref="LExcelDownload" onHandleOk={this.excelDownCallBack} isShowColumn={this.excelDownShowColumn} downTable={this.excelDownTable} templateId={this.excelDownloadTemplateId} templateName={this.excelDownloadTemplateName}></LExcelDownload>
                </a-drawer>  
            )
        }
    }

}
</script>



<style  scoped>
  .drawer-bootom-button {
    position: absolute;
    z-index: 999999;
    bottom: 0;
    width: 100%;
    /* border-top: 1px solid #e8e8e8; */
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }


  .qualityManual-container {
      padding: 0 !important;
      width: 100%;
      height: calc(100vh - 50px);
  }
   
  .qualityManual-container-office {
      width: 100%;
      height: calc(100% - 55px);
  }
</style>